<template>
  <div class="chat-head-title-wrap">
    <!-- 聊天中时间提示部分 -->
    <div class="chat-head">
      <span class="chat-return" @click="returnSuperiors"></span>
      <span class="chat-title">{{chatObject}}</span>
      <span class="chat-setting" v-if="titleType=='setting'" @click="establish"></span>
      <span class="chat-create" v-if="titleType=='create'" @click="establish"></span>
      <span class="chat-establish" v-if="titleType=='establish'" @click="establish">创建</span>
      <span class="chat-establish" v-if="titleType=='determine'" @click="establish">确定</span>
    </div>
    
    <!-- 头部输入框部分 -->
    <div class="search-bar" v-if="searchBar">
        <input class="search" type="text" v-model="data"/>
        <i class="search-icon"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'fyHeadTitle',
  data() {
    return {
      data:'',
    }
  },
  props: {
    

    /* OP昵称 */
    chatObject: {
      type: String,
      default: '',
    },

    /* title类型：
      setting：竖三点符
      create：气泡创建符
      establish：创建
      determine：确定
    */
    titleType: {
      type: String,
      default: '3',
    },

    searchBar: {
      type: Boolean,
      default: false
    },
  },

  methods: {
    establish(){
      this.$emit('create')
    },

    returnSuperiors(){
      
      this.$emit('return')
    },

  },
  watch: { //监听输入框内容
        data: {
            handler() {
                this.$emit('search',this.data)
            },
            deep: true
        }
    }

}
</script>

<style lang="scss" scoped>
// @import url('~@css/public/reset.scss');
@import '@css/globalCite/defaultVariable.scss';
@import '@css/globalCite/defaultThemeVariable.scss';
@import '@css/globalCite/themeMixin.scss';
@import '@css/globalCite/bgImageMixin.scss';
@import '~@css/components/headTitle/fyHeadTitle.scss';

</style>
